import React,{useState} from 'react';
import MultHookStatus from './02_useState的使用/01_多个状态的使用';
// import ComplexHooksState from './02_useState的使用/02_复杂状态的修改';
// import CounterClass from './01_体验hooks/01_counter-class';
// import CounterHook from './01_体验hooks/02_counter-hook';
import CounterHook from './01_体验hooks/03_counter-hook';
import ClassTitleChange from './03_effectHook的使用/01_class实现title的修改';
import HookCounterChangeTitle from './03_effectHook的使用/02_hook实现title的修改';
import EffectHookCancelDemo from './03_effectHook的使用/03_useEffect模拟订阅和取消';
import MultEffectHookDemo from './03_effectHook的使用/04_多个useEffect一起使用';




function App() {
  //函数式组件，可以使用hook
  const [show, setShow] = useState(true);
  return (
    <div className="App">
      <h2>App</h2>
      {/* 1.hook初体验 */}
      {/* <CounterClass/>  */}
      {/* <CounterHook/> */}
      {/* <CounterHook/> */}
      {/* 2.useState的使用 */}
      {/* <MultHookStatus/> */}
      {/* <ComplexHooksState/> */}
      {/* 3.useEffect的使用 */}
      {/* <ClassTitleChange/> */}
      {/* <HookCounterChangeTitle/> */}
      {/* <EffectHookCancelDemo/> */}
      {/* 使用逻辑语句控制组件的挂载和卸载 */}
      {/* {show && <EffectHookCancelDemo/> } */}
      {/* 点击按钮后，上面的组件进行卸载 */}
      <button onClick={e => setShow(!show)}>切换</button>
      {/* 多个useEffect的使用 */}
      {show && <MultEffectHookDemo/>}
    </div>
  );
}

export default App;
